<template>
		<div class="content">
				<div class="con_top">
						<div class="" :class="[nav == 1 ? 'con_top_nav_p' : 'con_top_nav']" @click="nav_click(1)" >出售中</div>
						<div class="" :class="[nav == 2 ? 'con_top_nav_p' : 'con_top_nav']" @click="nav_click(2)" >已售罄</div>
						<div class="" :class="[nav == 3 ? 'con_top_nav_p' : 'con_top_nav']" @click="nav_click(3)" >仓库中</div>
				</div>
				<div class="con_con">
					<div class="con_ppo">
							<div class="con_top_btn">
								<div class="btn1" @click="goto">发布商品</div>
							</div>
					</div>			
				</div>
		</div>
</template>
<script>
	import api from "../api"
	let t
	export default {
				data(){
					return {
						nav:'1',
					}
				},
				mounted(){
					t=this 
				},
				methods:{
						nav_click(e){
								t.nav=e
						},
						goto(){
							api.goto(this,'details',{id:1})
						},
				}
	}
</script>

<style >
		.content{
			width:1500px;
			height:100%;
			background-color: #F7EED6;
		}
		.con_top{
			width: 100%;
			height: 55px;
			display: flex;
			padding-left: 30px;
			box-sizing: border-box;
			background-color: #FFFFFF;
		}
		.con_top_nav{
			height: 100%;
			display: flex;
			align-items: center;
			font-size: 15px;
			color: #333;
			border-bottom:2px solid #FFFFFF ;
			margin-right: 30px;
		}
		.con_top_nav:hover{
			color: #0074D9;
		}
		.con_top_nav_p{
			height: 100%;
			display: flex;
			align-items: center;
			font-size: 15px;
			color: #333;
			border-bottom:2px solid #0074D9 ;
			margin-right: 30px;
		}
		.con_con{
			width: 100%;
			height: 100%;
			padding: 15px;
		}
		.con_ppo{
			width: 100%;
			/* height: 100%; */
			padding: 15px;
			box-sizing: border-box;
			background-color: #FFFFFF;
		}
		.con_top_btn{
			width: 100%;
			height: 40px;
		}
		.btn1{
			width: 100px;
			height: 100%;
			background-color: #0074D9;
			font-size: 14px;
			color: #fff;
			text-align: center;
			line-height: 40px;
			border-radius: 5px;
		}
</style>
